Intro

Intersection observer

Helper components to detect intersection with the viewport or other scroll-containers.

Useful for lazy-loading, virtualisation, or animating elements based on how visible they are.

Demo

Scroll container and notice how the card s fading
in based on how far into the viewport it gets.

Detect Element Visibility

The Intersection Observer API allows you to efficiently detect when an element enters or leaves the viewport, enabling smooth lazy loading and infinite scrolling experiences.

Trigger Animations

Use the Intersection Observer API to trigger animations as elements come into view, creating engaging and interactive user experiences without affecting performance.

Optimize Resource Loading

Improve page load times and reduce bandwidth usage by leveraging the Intersection Observer API to load images, videos, and entire components only when they're about to enter the viewport.

Components

  • render-when-in-view

    This is a simplified component specifically for reporting when it comes in and out of view.

    This component is particularly useful for lazy-loading or virtualisation or components.

    If you know the approximate dimensions of the content, for example list items, you may wrap each item in a `render-when-in-view` to only load the slotted content when the element is actually in view.

    Attributes

    root-element-id

    		The id of the element that is used as the viewport for checking visibility of the target. This is usually set to the nearest scroll-container (overflow: visible/auto). Defaults to the browser viewport if not specified or if null.

    root-margin

    		Margin around the root. Same syntax as CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The margin grows or shrink each side of the root element's bounding box before computing intersections. Default is "0px 0px 0px 0px".

    threshold

    		A number which indicate at what percentage of the target's visibility the slotted content should be rendered at. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. The default is 0 (meaning as soon as any part is visible).
    unload-when-out-of-viewShould the content be removed again when it goes out of view. Default is false. False usually means higher RAM, but lower CPU usage. 

    Slots

    defaultContent to render when in view.
    placeholderContent to render when not in view. For example a skeleton or a cheaper version of the item.

    Rendering elements is not instant. When scrolling fast the placeholder may show shortly, even if threshold is 0 and root-margin is positive.

  • Intersection observer

    Similar to `render-when-in-view`, but has events and context to listen to changes. Also supports threshold as array to get more fine-tuned feedback as the component scrolls into view.

    Attributes

    root-element-id

    		The id of the element that is used as the viewport for checking visibility of the target. This is usually set to the nearest scroll-container (overflow: visible/auto). Defaults to the browser viewport if not specified or if null.

    root-margin

    		Margin around the root. Same syntax as CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The margin grows or shrink each side of the root element's bounding box before computing intersections. Default is "0px 0px 0px 0px".

    threshold

    		Either a number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as any part is visible).

    Events

    ChangeCalled each time a threshold is met. The event contains the following important fields:

    isIntersecting: True if any threshold is met.

    intersectionRatio: If you have given multiple threshold (array), this ratio indicates how much of the element is intersecting the root. 1 is fully inside, 0.5 is halfway visible. Notice that the values may not be exact matches to the given thresholds, but can be in between values.

    Context

    In viewAny subcomponent can subscribe to this value. Will indicate if any threshold is met.
    Intersection ratioAny subcomponent can subscribe to this value. Indicates how much of the component is intersected. Useful for animations based on scroll.

Formulas

  • Build Threshold List

    Helper formula to construct complex thresholds for the Intersection observer component. By default thresholds is a single value to detect whether the component is intersecting or not, but you may also add multiple values in an array to get a continuous intersection ratio.

    Number of stepsHow precisely you want to report steps. 6 would give [0, 0.2, 0.4, 0.6, 0.8, 1]